<template>
  <div class="zong1">
    <div class="toptitle">设备数据</div>
    <!-- 上侧一些选择器和输入框，按钮 -->
    <div class="topselect">
      <div></div>
      <div class="topselect2">
        <el-select
          v-model="place"
          class="m-2"
          placeholder="请选择设备位置"
          size="small"
        >
          <el-option
            v-for="item in placelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="ifonline"
          class="m-2"
          placeholder="全部在线/离线状态"
          size="small"
        >
          <el-option
            v-for="item in ifonlinelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="alertzt"
          class="m-2"
          placeholder="全部警报状态"
          size="small"
        >
          <el-option
            v-for="item in alertztlist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="devicename"
          class="m-2"
          placeholder="请输入设备名称"
          style="width: 300px"
          size="small"
        >
        </el-input>
        <el-button
          type="primary"
          icon="search"
          class="m-3"
          @click="handleSearch"
        ></el-button>
        <!-- <el-button type="primary" size="small" class="m-3" @click="prints">打印</el-button> -->
      </div>
    </div>

    <!-- 温湿度的表格 -->
    <el-table
      id="table"
      border
      height="620px"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      v-show="Tableval == 0"
      :row-style="{ height: '56px' }"
      style="width: 97%; margin-left: 23px; background: #f5f7fa"
      :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }"
      :cell-style="{
        'text-align': 'center',
        background: '#f5f8fb',
      }"
    >
      <el-table-column type="selection" />
      <el-table-column prop="key" label="设备ID" align="center" />
      <el-table-column
        prop="name"
        label="设备位置"
        width="340"
        align="center"
      />
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" align="center">
        <template #default="scope">
          <div class="rgz">
            <div v-if="scope.row.workOrderType == '1'" class="greeny"></div>
            <div v-if="scope.row.workOrderType == '0'" class="redy"></div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" align="center">
        <template #default="scope">
          <div class="rgz">
            <div v-if="scope.row.influenceType == '1'">在线</div>
            <div v-if="scope.row.influenceType == '0'">离线</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="val" label="信号质量" align="center" />
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage"
        :small="true"
        layout="total, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { getDeviceList, getSbMsg } from "@/api/model/echarts";
import { ref, watch, onMounted, reactive } from "vue";
// import FileSaver from "file-saver";
import {
  SpotList,
  DeviceListSpot,
  AreaListSpot,
} from "@/api/model/equipment/point";
// import * as XLSX from "xlsx/dist/xlsx.mini.min.js";
const currentPage = ref(1);
const currentPage1 = ref(1);
const pageSize = ref(10);
const input = ref("");
const total = ref(0);
const Tableval = ref(0);
// const editVisible = ref(false);
const state = reactive({
  // 列表数据
  tableData: [],

  // 设备列表
  deviceList: [],

  // 区域列表
  areaList: [],

  // 添加点位
  form: {},

  // 编辑点位
  upform: {},
});
//初始化页面获取数据
const getdata = async () => {
  let resss = await getSbMsg();
  let res = await getDeviceList();
  console.log("设备数据", resss.data);
  // console.log(res.data);
  console.log(res.data, "6666666666666666666666666");
  tableData.value = res.data;
};

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
// 获取点位列表
const getSpotList = async () => {
  // console.log(111111111111111111111111111111111111111);
  let { data: res } = await SpotList({
    keyword: input.value,
    page: currentPage1.value,
  });
  console.log(res, "获取点位列表");
  if (res.code == 200) {
    state.tableData = res.data.list;
  }
  total.value = res.data.total;
};

function handleSearch() {
  // //需给表格定义一个id或者类名
  // console.log("1111111111", XLSX);
  // let wb = XLSX.utils.table_to_book(document.querySelector("#table"));
  // console.log("222");
  // let wbout = XLSX.write(wb, {
  //   bookType: "xlsx",
  //   bookSST: true,
  //   type: "array",
  // });
  // try {
  //   FileSaver.saveAs(
  //     new Blob([wbout], { type: "application/octet-stream" }),
  //     "111.xlsx"
  //   ); //***是自己导出文件时的命名，随意
  // } catch (e) {
  //   if (typeof console !== "undefined") console.log(e, wbout);
  // }
  // return wbout;
}
onMounted(() => {
  getdata();
  getAreaListSpot();
  getSpotList();
  getDeviceListSpot();
});
var tableData = ref([]);
var place = ref("");
const placelist = [];
var ifonline = ref("");
const ifonlinelist = [];
var alertzt = ref("");
const alertztlist = [];
var devicename = ref("");
watch(place, (newValue) => {
  alert(newValue);
});
watch(ifonline, (newValue) => {
  alert(newValue);
});
watch(alertzt, (newValue) => {
  alert(newValue);
});
watch(devicename, (newValue) => {
  alert(newValue);
});
// const down=()=> {
//   alert("下载");
// }
// const prints=()=>{
//   alert("打印");
// }
// 获取设备列表
const getDeviceListSpot = async () => {
  let { data: res } = await DeviceListSpot();
  console.log("获取设备列表res", res);
  if (res.code == 200) {
    state.deviceList = res.data.list;
  }
};
// 获取区域列表
const getAreaListSpot = async () => {
  let { data: res } = await AreaListSpot();
  console.log("获取区域列表", res);
  if (res.code == 200) {
    state.areaList = res.data.list;
  }
};
</script>
<style scoped lang="less">
.zong1 {
  width: 100%;
  min-height: 800px;
  height: auto !important;
  background: white;
}
/deep/.warning-row {
  background: #fff;
}
/deep/.success-row {
  background: #f5f7fa;
}
.lie {
  background: red;
}
.dell {
  font-size: 13px;
  color: #fccb56;
  cursor: pointer;
}
.m-1 {
  margin-top: 20px;
  margin-left: 25px;
}
.el-table__cell {
  padding: 0 !important;
}
.edit {
  margin-right: 30px;
  font-size: 13px;
  color: #606fa6;
  cursor: pointer;
}
.topselect {
  display: flex;
  justify-content: space-between;
}
.topselect1 {
  padding-left: 25px;
  line-height: 60px;
}
.page {
  margin-left: 1350px;
  margin-top: 10px;
}
.topselect2 {
  padding-right: 30px;
  line-height: 60px;
}

.el-table .cell {
  padding: 0;
}

.m-2 {
  margin-left: 20px;
  width: 150px;
}

.m-3 {
  width: 30px;
  height: 30px;
  margin-left: 15px;
  /* background: #8faadc; */
}

.toptitle {
  padding-left: 30px;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #4d62a5;
  border-bottom: 2px solid #d9deec;
  padding-bottom: 10px;
}

.el-table .el-table__cell {
  background: #f5f7fa;
}

.demo-pagination-block {
  float: right;
  margin-right: 80px;
  margin-top: 8px;
}

.redy {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: red;
  margin-left: 40px;
}

.greeny {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: #0db459;
  margin-left: 40px;
}

.rgz {
  text-align: center;
}
</style>